<template>
  <!-- 弹窗 -->
  <div class="dialog_box">
    <el-dialog v-model="visible" :title="`【${showData.name}】 审核`" width="600px" @closed="onClosed">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
        <el-form-item>
          <template #label> {{ showData.name }} :</template>
          <span v-if="showData.business_state" class="state">{{ showData.business_state }}</span>
        </el-form-item>
        <el-form-item label="提审人:" prop="full_name">
          <div>{{ showData.audit_created_name || '--' }}</div>
        </el-form-item>
        <el-form-item label="提审时间:" prop="full_name">
          <div>{{ showData.audit_created_at || '--' }}</div>
        </el-form-item>
        <el-form-item label="审核结果:" prop="state">
          <el-select v-model="form.state" placeholder="请选择">
            <el-option
              v-for="item in [
                { value: 2, name: '通过' },
                { value: 3, name: '不通过' }
              ]"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="不通过原因:" :prop="form.state == 3 ? 'remark' : ''">
          <el-input v-model="form.remark" :rows="4" type="textarea" placeholder="请输入不通过原因" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit(formRef)">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import bus from '@/utils/bus'
  import { businessAudit } from '@/api/salesleads/salesmanagement/business'
  import { ElMessage } from 'element-plus'
  import { ref, reactive } from 'vue'
  interface Props {
    type: any
  }
  const emit = defineEmits(['submit', 'handle'])
  const props = withDefaults(defineProps<Props>(), {
    type: 'list'
  })
  const visible = ref(false)
  const formRef = ref<any>()
  const form = reactive<any>({
    business_id: '', //商机ID
    state: '', //类型 2通过 3不通过
    remark: '' //备注原因state=3时必填
  })
  const rules = reactive<any>({
    state: [{ required: true, message: '请选择审核状态', trigger: 'change' }],
    remark: [{ required: true, message: '请输入不通过原因', trigger: 'blur' }]
  })
  const onSubmit = async (formEl: any) => {
    if (!formEl) return
    await formEl.validate((valid: any, fields: any) => {
      if (valid) {
        businessAudit(form).then((res: any) => {
          visible.value = false
          if (props.type == 'list') {
            bus.emit('reloadTable')
          }
          if (props.type == 'detail') {
            emit('submit')
          }
          ElMessage.success('保存成功')
        })
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  const showData = reactive({
    name: '',
    audit_created_name: '',
    audit_created_at: '',
    business_state: ''
  })
  const handleAuditDialog = (data?: any, type?: any) => {
    console.log(data, '--------')
    visible.value = true
    form.business_id = data.business_id
    showData.name = data.name
    showData.audit_created_name = data.audit_created_name
    showData.audit_created_at = data.audit_created_at
    showData.business_state = data.business_state
    type == 'THROUGH' && (form.state = 2)
    type == 'NO_THROUGH' && (form.state = 3)
  }
  // 关闭弹框
  const onClosed = () => {
    form.state = ''
    form.remark = ''
    formRef.value.resetFields()
  }
  defineExpose({
    handleAuditDialog
  })
</script>

<style lang="scss" scoped>
  .dialog_box {
    :deep(.el-dialog) {
      .el-dialog__header {
        border-bottom: 1px solid #eaeaea;
        // .el-dialog__title {
        //   font-size: 16px;
        // }
      }
      .el-dialog__body {
        padding: 20px;
        padding-bottom: 0;
        border-bottom: 1px solid #eaeaea;
        .state {
          padding: 5px;
          font-size: 12px;
          color: #59d2a0;
          border: 1px solid #bcf1d1;
          background-color: #ebfff3;
        }
      }
    }
  }
  .btn_box {
    text-align: right;
  }
</style>
